<template>
  <div>
    <button class="alt" @click="loadCanvas()">左</button>
    <button class="alt" @click="loadCanvas()">上</button>
    <button class="alt" @click="loadCanvas()">下</button>
    <button class="alt" @click="loadCanvas()">右</button>
    <canvas class="canvas" ref="canvas" width="800" height="600">
        你的浏览器居然不支持Canvas？！赶快换一个吧！！
    </canvas>
  </div>
</template>

<script>
  export default {
    name: 'canvas-page',
    methods: {
      loadCanvas () {
        this.canvas = this.$refs.canvas
        this.context = this.canvas.getContext('2d')
        this.context.moveTo(100, 100)
        this.context.lineTo(200, 100)
        this.context.lineWidth = 5
        this.context.strokeStyle = '#DB7093'
        this.context.stroke()
      }
    }
  }
</script>

<style>
.canvas{
  border: 1px solid #aaaaaa; 
  display: block; 
  margin: 50px auto;
}
</style>
